<%@page import="com.grupobbva.seguridad.util.Constante"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
<style>
	table {padding: 0px; margin: 0px; border-collapse: collapse;}
	td    {padding: 0px; margin: 0px; border-collapse: collapse; font-family: verdana; font-size: 11px; vertical-align: middle;
	       vertical-align: middle; border-bottom: solid 1px #009ee5;}
	.n1    {margin-left: 5px}
	.n2    {margin-left: 10px}
	.n3    {margin-left: 15px}
	.barra {width: 100%; height: 2px; background-color: #009ee5; margin-top: 3px; margin-bottom: 2px;}
	.tbOpc {}
	.tbOpc td {padding: 2px !important; border-collapse: separate !important;}
	.opcP  {font-weight:bold; height: 30px; color: #104fa4; background-color: #fbfcfd}
	.opc<%=Constante.TD_OPCION_SUBMENU%> {height: 23px;}
	.opc<%=Constante.TD_OPCION_OPCION%>  {height: 23px;}
	.opcS    {vertical-align: top;}
	#tblMenu {width: 100%; height: 100%; border: solid 1px #009ee5;}
	.tblSubMenu {width: 100%;}
	.tblOpc {border: 0px !important;}
	.tblOpc td {border: 0px !important; padding: 2px !important;}
	.imgOpcion {width: 19px; height:19px;}
</style>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery-1.5.2.min.js"></script>
</head>
<body style="margin: 2px; margin-top: 0px;">
<table id="tblMenu" cellpadding="0" cellspacing="0" border="0">
<c:forEach items="${usuarioApp.opciones}" var="opcion" varStatus="count">
	<c:choose>
		<c:when test="${opcion.nivel == 1}"><c:set var="clase" value="opcP"/></c:when>
		<c:otherwise><c:set var="clase" value="opc${opcion.tipo.detalleId}"/></c:otherwise>
	</c:choose>
	<c:if test="${opcion.nivel == 1}">
		<tr id="tr${opcion.arbol}" class="opcP" onclick="selMen('tr${opcion.arbol}')"><td><table class="tblOpc" style="margin-left: ${opcion.nivel*5}px;"><tr><td><img src="opcverimg.do?appId=${opcion.id.aplicacionId}&opcId=${opcion.id.opcionId}" class="imgOpcion"/></td><td><c:choose><c:when test="${not empty opcion.url}"><a href="javascript:selOpc('${opcion.urlAbsoluta}');">${opcion.nombreLargo}</a></c:when><c:otherwise>${opcion.nombreLargo}</c:otherwise></c:choose></td></tr></table></td></tr>
		<tr id="tr${opcion.arbol}"><td class="opcS">
		<table class="tblSubMenu">
		<c:forEach items="${usuarioApp.opciones}" var="opcion2" varStatus="count2">
			<c:if test="${fn:startsWith(opcion2.arbol, opcion.arbol) and opcion2.id.opcionId != opcion.id.opcionId}">
			<tr id="tr${opcion2.arbol}" class="opc${opcion2.tipo.detalleId}"><td><table class="tblOpc" style="margin-left: ${opcion2.nivel*8}px"><tr><td><img src="opcverimg.do?appId=${opcion2.id.aplicacionId}&opcId=${opcion2.id.opcionId}" class="imgOpcion"/></td><td><c:choose><c:when test="${not empty opcion2.url}"><a href="javascript:selOpc('${opcion2.urlAbsoluta}');">${opcion2.nombreLargo}</a></c:when><c:otherwise>${opcion2.nombreLargo}</c:otherwise></c:choose></td></tr></table></td></tr>
			</c:if>
		</c:forEach>
		</table>
		</td></tr>
	</c:if>
	<!-- tr id="tr${opcion.arbol}" class="${clase}" onclick="selMen('tr${opcion.arbol}')"><td><p style="margin-left: ${opcion.nivel*5}px"><c:choose><c:when test="${not empty opcion.url}"><a href="javascript:selOpc('${opcion.urlAbsoluta}');">${opcion.nombreLargo}</a></c:when><c:otherwise>${opcion.nombreLargo}</c:otherwise></c:choose></p></td></tr-->
</c:forEach>
</table>
<form id="frm" target="centro" method="post">
	<input type="hidden" name="<%=Constante.REQUEST_APLICACION_ID%>" value="${usuarioApp.perfil.aplicacion.aplicacionId}">
	<input type="hidden" name="<%=Constante.REQUEST_USUARIO_ID%>" value="${usuarioApp.usuarioId}">
</form>
<script type="text/javascript">
function selOpc(url) {
	document.getElementById("frm").action = url;
	document.getElementById("frm").submit();
}
function selMen(arbol) {
	var tbl = document.getElementById("tblMenu");
	for(var i = 0; i < tbl.rows.length; i++) {
		var tr = tbl.rows[i];
		if(tr.className != "opcP" && tr.id.indexOf(arbol) == -1) {
			tr.style.display="none";
		} else {
			tr.style.display="";
		}
	}
}
selMen("tr01");
</script>
</body>
</html>